<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Android与H5通信示例</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        button { padding: 10px 20px; margin: 10px 0; }
        #messageArea { margin-top: 20px; padding: 10px; border: 1px solid #ccc; }
    </style>
</head>
<body>
    <h3>Android与H5通信示例</h3>
    
    <button onclick="sendMessageToAndroid()">发送消息到Android</button>
    
    <div id="messageArea">
        <p>消息将显示在这里</p>
    </div>

    <script>
        // 向Android发送消息
        function sendMessageToAndroid() {
            const message = "你好，Android！这是来自H5的消息。";
            appendMessage("H5发送: " + message);
            
            // 检查Android接口是否存在
            if (window.Android) {
                // 调用Android接口中的方法
                window.Android.receiveMessageFromH5(message); 
            } else {
                appendMessage("错误: Android接口未找到");
            }
        }

        // 接收来自Android的消息
        function receiveMessageFromAndroid(message) {
            appendMessage("收到Android消息: " + message);
        }

        // 在页面上添加消息
        function appendMessage(text) {
            const messageArea = document.getElementById('messageArea');
            const p = document.createElement('p');
            p.textContent = text;
            messageArea.appendChild(p);
        }
    </script>
</body>
</html>    